/*
 * Copyright 2021 ThoughtWorks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";

$width-for-msg: 100px;
$width-for-instance-selection: 360px;
$dropdown-button-content-z-index: 5;

.page-header {
  display: flex;

  .pipeline-info {
    display:        flex;
    flex-direction: column;
    height:         100%;

    .value {
      font-size: 15px;
    }
  }
}

.label {
  font-size: 0.625rem;
}

.pipeline-instance-selection {
  width:          $width-for-instance-selection;
  vertical-align: baseline;

  input[type="search"] { //sass-lint:disable-line no-qualifying-elements
    width: $width-for-instance-selection;
  }
}

.pipeline-comparison-text {
  width:          $width-for-msg;
  font-style:     italic;
  vertical-align: middle;
}

.instance-wrapper {
  div {
    margin-bottom: 5px;
  }
}

.warning {
  font-size: 0.725rem;
  color:     $failed;

  i {
    color: $building;
  }
}

.info-msg {
  font-size:     0.825rem;
  padding:       5px 10px;
  border:        1px solid $go-secondary;
  border-radius: $global-border-radius;
  background:    $info;
  margin-bottom: 10px;

  i {
    color: $go-secondary;
  }
}

.dropdown-content-wrapper {
  position: relative;
  top:      -5px;
  left:     0;
  z-index:  $dropdown-button-content-z-index;

  .spinner-wrapper {
    display:         flex;
    justify-content: center;
    flex-direction:  column;
  }

  .dropdown-content {
    position:      absolute;
    top:           0;
    left:          0;
    background:    $white;
    width:         400px;
    max-height:    500px;
    overflow-y:    auto;
    border-radius: $global-border-radius;
    box-shadow:    0 2px 4px $box-shadow-color;
  }

  .info {
    padding:    10px;
    font-style: italic;
  }

  .instances-list {
    list-style-type: none;
    margin:          0;
    padding:         0;
  }

  .list-item {
    padding:       8px 16px;
    border-bottom: 1px solid $border-color;
    cursor:        pointer;

    h5 {
      margin: 0;
    }

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background: $icon-bg-hover;
    }
  }

  .matching-instance-stages {
    width: 100%;

    span {
      display: block;
      width:   100%;
    }
  }
}

.modification {
  width:      100%;
  font-size:  0.625rem;
  border-top: 1px solid $border-color;
  margin:     5px 0;
  word-break: break-all;

  th {
    width:          80px;
    vertical-align: top;
  }

  td:before {
    content:  ":";
    display:  inline-block;
    position: relative;
    left:     -10px;
  }
}

.commit-msg {
  white-space: pre-line;
}

.material-modifications {
  table td {
    &:nth-child(1) {
      width: 15%;
    }

    &:nth-child(2) {
      width:      20%;
      word-break: break-word;
    }

    &:nth-child(3) {
      width: 15%;
    }
  }
}

.dependency-materials {
  table td:first-child {
    width: 40%;
  }
}

.truncate {
  position: relative;

  span {
    position:      absolute;
    max-width:     100%;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   pre;
  }
}
